import { deleteCar } from '../../../api/api-garage-service';
import { statusCarEngine } from '../../../api/api-engine-service';
import { Component } from '../../../components/base-component';
import { Button } from '../../../components/button';
import { SvgComponent } from '../../../components/svg-component';
import { ICar } from '../../../interfaces/car';
import { carCount, updateCarConfigs, updatingCars } from '../../../utilities/observable';
import { Car } from './car';
import './car-track.css';
import { IEngineData } from '../../../interfaces/engine-data';

interface ICarTrack {
  className: string;
  carOptions: ICar;
}

export class CarTrack extends Component {
  private duration = 0;

  private firstWrapper = new Component({ className: 'car-track__wrapper' });

  private buttonSelect = new Button({ className: 'button', text: 'Select' });

  private buttonRemove = new Button({ className: 'button', text: 'Remove' });

  private secondWrapper = new Component({ className: 'car-track__wrapper' });

  private trackContainer = new Component({ className: 'car-track__track-container' });

  private controlButtons = new Component({ className: 'car-track__control' });

  private buttonStart = new Button({ className: 'button', text: 'Start' });

  private buttonStop = new Button({ className: 'button', text: 'Stop' });

  private flag = new SvgComponent('car-track__flag');

  car: Car;

  carOptions: ICar;

  constructor({ carOptions }: ICarTrack) {
    super({ className: 'car-track__container' });
    const car = new Car({
      name: carOptions.name,
      color: carOptions.color,
      id: carOptions.id,
    });

    this.car = car;

    this.carOptions = carOptions;

    this.buttonRemove.addListener('click', (e: Event) => {
      e.preventDefault();
      deleteCar(carOptions.id);
      this.node.remove();
      carCount.notify((count) => {
        return count - 1;
      });
      updatingCars.notify(() => {
        return true;
      });
    });

    this.buttonSelect.addListener('click', () => {
      updateCarConfigs.notify(carOptions.id);
    });

    this.buttonStart.addListener('click', async (e: Event) => {
      e.preventDefault();
      this.setStateControlButtons('start');
      const duration = await this.handleStatusCarEngine(carOptions, 'started');
      this.car.animateCar(duration);
    });

    this.buttonStop.addListener('click', async (e: Event) => {
      e.preventDefault();
      this.setStateControlButtons('stop');
      await this.handleStatusCarEngine(carOptions, 'stopped');
      this.car.cancelAnimation();
    });

    this.firstWrapper.appendChildren([
      this.buttonSelect,
      this.buttonRemove,
      new Component({ tag: 'span', className: 'car-track__name', text: `${carOptions.name}` }),
    ]);
    this.controlButtons.appendChildren([this.buttonStart, this.buttonStop]);
    this.trackContainer.appendChildren([car, this.flag]);
    this.secondWrapper.appendChildren([this.controlButtons, this.trackContainer]);
    this.appendChildren([this.firstWrapper, this.secondWrapper]);
  }

  async handleStatusCarEngine(carOptions: ICar, status: 'started' | 'stopped') {
    const engineData: IEngineData = await (await statusCarEngine(carOptions.id, status)).content;
    this.duration = engineData.distance / engineData.velocity;
    return this.duration;
  }

  getCar() {
    return this.car;
  }

  getCarOptions() {
    return this.carOptions;
  }

  setStateControlButtons(state: 'start' | 'stop') {
    if (state === 'start') {
      this.buttonStart.setDisabledState(true);
      this.buttonStop.setDisabledState(false);
    }
    if (state === 'stop') {
      this.buttonStop.setDisabledState(true);
      this.buttonStart.setDisabledState(false);
    }
  }
}
